<template>
  <div class="home">
    <van-search
      v-model="search"
      placeholder="请输入搜索关键词"
      show-action
      shape="round"
      @search="onSearch"
    >
      <div slot="action" @click="onSearch">搜索</div>
    </van-search>
    <div class="entry flex_start">
      <van-tag plain size="20" color="#969799" v-for="item in tagArr" :key="item">{{item}}</van-tag>
    </div>

    <div class="title flex_space">
      <div class="mix_title">精选</div>
      <div class="flex_start">
        <van-icon name="replay" size="15"></van-icon>
        <span class="min_font">换一批</span>
      </div>
    </div>
    <div @click="goInfo(item.id)" class="panel-list" v-for="item in  list " :key="item.id">
      <div class>
        <van-tag mark type="danger" v-if="item.tag == 1">重磅</van-tag>
        <van-tag mark type="danger" v-if="item.tag == 0">热门</van-tag>
        <div class="select">{{item.title}}</div>
      </div>
      <div class="flex_space">
        <div class="min-size">{{item.name}}</div>
        <div class="min-size">
          <span>浏览{{item.browseNum}}人</span>
          <span>评论{{item.reviewNum}}人</span>
        </div>
      </div>
    </div>
    <div class="title flex_space">
      <div class="mix_title">最新</div>
      <div class="flex_start">
        <!-- <span class="min_font">更多</span> <van-icon  name="arrow" size='15'></van-icon> -->
      </div>
    </div>
    <div class="panel-list" v-for="item in  newlist " :key="item.id">
      <div class="flex_space">
        <div class="select">{{item.title}}</div>
        <img v-if="item.img" :src="item.img" width="100" height="50">
        <video v-if="item.videoSrc"  controls width="100" height="100"  :src='item.videoSrc' ></video>
      </div>
      <div class="flex_start">
            <img v-for="imgstr in  item.imgArr" :key="imgstr" :src="imgstr" width="100" height="50" class="imgArr"/>
      </div>
      <div class="flex_space">
        <div class="min-size">{{item.name}}</div>
        <div class="min-size">
          <span>浏览{{item.browseNum}}人</span>
          <span>评论{{item.reviewNum}}人</span>
        </div>
      </div>
    </div>
    <div class="ertification" @click="ertification">
      <van-icon name="plus" size="10"></van-icon>发帖
    </div>
  </div>
</template>
<script>
import {
  Tabbar,
  TabbarItem,
  Tag,
  Swipe,
  SwipeItem,
  Search,
  Icon,
  Lazyload,
  Button
} from 'vant'

export default {
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Tag.name]: Tag,
    [Icon.name]: Icon,
    [Search.name]: Search,
    [Lazyload.name]: Lazyload,
    [Button.name]: Button
  },
  data() {
    return {
      search: '',
      tagArr: ['重磅', '政策', '大雷说房', '热门'],
      images: [
        'https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg',
        'https://img.yzcdn.cn/public_files/2017/10/24/1791ba14088f9c2be8c610d0a6cc0f93.jpeg'
      ],
      list: [
        {
          id: '001',
          title: '成都市东进方针对楼市有哪些影响及重点模块分析?',
          name: '@测试',
          img:
            'https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D790/sign=1cf755a396ef76c6d0d2f922ad17fdf6/b03533fa828ba61e51f94fad4734970a304e5919.jpg',
          browseNum: 50,
          reviewNum: 20,
          totalAll: 666,
          tag: 1 //重磅
        },
        {
          id: '002',
          title: '房产说对房价有多大影响?',
          name: '@张某某',
          browseNum: 150,
          reviewNum: 120,
          totalAll: 999,
        },
        {
          id: '003',
          title: '房贷需要注意那些方面的问题?',
          name: '@大磊',
          browseNum: 150,
          reviewNum: 120,
          totalAll: 999,
          tag: 0 //热门
        }
      ],
      newlist: [
        {
          id: 0,
          title: '成都市东进方针对楼市有哪些影响及重点模块分析?',
          name: '@测试',
          img:
            'https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D790/sign=1cf755a396ef76c6d0d2f922ad17fdf6/b03533fa828ba61e51f94fad4734970a304e5919.jpg',
          browseNum: 50,
          reviewNum: 20,
          totalAll: 666,
          tag: 1 //重磅
        },
        {
          id: 1,
          title: '房产说对房价有多大影响?',
          name: '@张某某',
          browseNum: 150,
          reviewNum: 120,
          totalAll: 999,
          videoSrc:'https://ksv-video-publish.cdn.bcebos.com/ef34f63e5cebb4bb6e792964a8304c73058dc119.mp4?auth_key=1560939587-0-0-d0e0c3222f205f2286e0484f6a074db0'
        },
        {
          id: 2,
          title: '房贷需要注意那些方面的问题?',
          name: '@大磊',
          browseNum: 150,
          reviewNum: 120,
          totalAll: 999,
           imgArr:['http://zhugenping.cn/uploads/allimg/170811/1-1fq1130045.jpg',
          'http://img3.redocn.com/20120406/Redocn_2012040602392601.jpg',
          'http://pic.58pic.com/58pic/11/80/27/35M58PICZre.jpg']
        },
        {
              id:3,
              title:'对现在房地产的解析?',
              name:'@某某',
              browseNum:150,
              reviewNum:120,
              totalAll:999,
              
          },
      ]
    }
  },
  methods: {
    onSearch() {},
    goInfo(id) {
      this.$router.push({
        path: '/post',
        query: {
          id: id
        }
      })
    },
    ertification() {
      this.$router.push({
        path: '/waitPost'
      })
    }
  }
}
</script>
<style lang="less">
.home {
  .entry {
    width: 100%;
    padding: 10px 10px;
    box-sizing: border-box;
    background-color: #fff;
    margin-top: 5px;
    .van-tag {
      margin-right: 10px;
    }
  }
  .tip_list {
    padding: 10px 10px;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  .title {
    padding: 10px 10px;
    box-sizing: border-box;
    .min_title {
      font-size: 14px;
    }
    .min_font {
      font-size: 12px;
    }
  }
  .panel-list {
    position: relative;
    margin-bottom: 5px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    padding: 10px 10px;
    box-sizing: border-box;
    .van-tag {
      position: absolute;
      top: 0;
      left: 0;
    }
    .select {
      margin-top: 10px;
    }

    .card_footer {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      font-size: 14px;
      padding: 10px 0;
      box-sizing: border-box;
      border-top: 1px solid #e5e5e5;
      margin-top: 5px;
    }
  }
  .ertification {
    position: fixed;
    bottom: 80px;
    right: 10px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid red;
    background-color: #fff;
    line-height: 50px;
    font-size: 12px;
    text-align: center;
    color: red;
    cursor: pointer;
  }
     .imgArr{
            margin-right: 10px;
            margin-top: 10px;
            margin-bottom: 10px;
        }
}
.flex_space {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.flex_start {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.min-size {
  font-size: 12px;
  color: #e3e3e3;
  margin-top: 10px;
}
</style>
